<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>手风琴</title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body {
			display: flex; /*弹性盒子布局*/
			justify-content: center; /*水平居中子元素*/
			align-items: center; /*垂直居中子元素*/
			height: 100%;
			background-color: rgba(243, 230, 241, .8);
		}

		.shell {
			width: 90%;
			height: 700px;
			display: flex;
		}

		.box {
			flex: 1;
			overflow: hidden; /*隐藏超出容器的部分*/
			transition:.5s; /*过渡时间*/
			margin: 0 20px;
			box-shadow: 10px 10px 20px rgba(0, 0, 0, .5); /*盒子阴影部分*/
			border-radius: 20px; /*圆角*/
			border: 10px solid #fff;
			background-color: #FFF;
		}

		.box>img {
			/*盒子里的图片*/
			width: 200%;
			height: 85%;
			object-fit: cover; /*图片覆盖*/
			transition: .5s;
		}

		.box>span {
			font: 200 45px;
			text-align: center;
			height: 15px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.box:hover {
			flex-basis: 40%;
		}

		.box:hover>img {
			width: 100%;
			height: 100%;
		}
	</style>
	<body>
		<div class="shell">
			<div class="box">
				<img src="img/img%20(1).jpg">
				<span>Image</span>
			</div>
			<div class="box">
				<img src="img/img%20(2).jpg">
				<span>Video</span>
			</div>
			<div class="box">
				<img src="img/img%20(3).jpg">
				<span>File</span>
			</div>
			<div class="box">
				<img src="img/img%20(4).jpg">
				<span>Music</span>
			</div>
			<div class="box">
				<img src="img/img%20(5).jpg">
				<span>Lyric</span>
			</div>
		</div>
	</body>
</html>
